<template>
  <div class="home-container">
    <!-- 搜索框 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button
        class="search-btn"
        size="small"
        round
        slot="title"
        icon="search"
        type="info"
        to="/search"
      >搜索</van-button>
    </van-nav-bar>

    <!-- 提示消息 -->
    <!-- <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :show-indicators="false"
      >
        <van-swipe-item>最近订单来自于3秒前</van-swipe-item>
        <van-swipe-item>最近订单来自于2秒前</van-swipe-item>
        <van-swipe-item>最近订单来自于1秒前</van-swipe-item>
      </van-swipe>
    </van-notice-bar> -->

    <!--  行业列表 -->

      <van-grid :column-num="4" :border = false>
            <van-grid-item
              v-for="value in showBusinessList"
              :key="value.busi_id"
              :text="value.busi_name"
              @click="loadbusiness(value.busi_id)"
              >
              <div class="businessBox">
                <van-image :src="value.image_url" />
              </div>
              <span class="businessName">{{value.busi_name}}</span>
            </van-grid-item>

            <van-grid-item>
              <div class="businessBox">
                <van-image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3566870290,1558238866&fm=26&gp=0.jpg" />
              </div>
              <span class="businessName">查看更多</span>
            </van-grid-item>
         </van-grid>

  <van-cell title="推荐"/>
    <van-card
      v-for="item in shopList"
      :key="item.shop_id"
      :desc="item.shop_address"
      :title="item.shop_name"
      @click="tobuy(item.shop_id)"
      :thumb="item.shop_avatar"
    >
       <template #tags>
          <van-tag plain type="danger">联系电话:{{item.shop_phone}}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import { getBusiness, getShop } from '@/api/business.js'

export default {
  name: 'homeIndex',
  components: {},
  props: {},
  data () {
    return {
      queryData: {
        pageNum: 1,
        pageSize: 15
      },
      showBusinessList: [],
      businessList: [],
      shopList: []
    }
  },
  created () {
    this.business()
    this.shop()
    // this.getLoadbusiness()
  },
  mounted () {

  },
  methods: {
    async business() {
      const { data } = await getBusiness()
      // console.log(data)
      if (data.meta.status === 200) {
        this.businessList = data.data
        for (let index = 0; index < this.businessList.length; index++) {
          if (index < 7) {
            this.showBusinessList.push(this.businessList[index])
          }
        }
      } else {
        this.$toast.fail(data.meta.msg)
      }
    },
    async shop() {
      const { data } = await getShop(this.queryData)
      console.log(data)
      this.shopList = data.data.rows
    },
    tobuy(shopId) {
      this.$router.push(`/goods/${shopId}`)
    },
    loadbusiness(busiId) {
      this.queryData.shop_busi_id = busiId
      this.shop()
    }
  }
}
</script>

<style scoped lang="less">
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 300px;
    text-align: center;
    background-color: #39a9ed;
  }
.notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .van-card__title{
  font-size: 0.4rem;
  color: #f93e2e;
  font-weight: 700;
}
.van-card__desc{
    margin-top: 15px;
}
.van-tag--danger{
 color: #ccc;
  border: 1px solid white;
  font-size: 0.4rem;
  margin-top: 45px;
}
.home-container {
    background-color:rgb(250, 251, 252);
    padding-top: 105px;
     padding-bottom: 100px;
    // height: 100vh;
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #fff;
    color: #f93e2e;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
      color: #f93e2e;
    }
  }
}
.page-nav-bar{
  background-color: #f93e2e;
}

.van-card{
  background-color: #fff;
  margin: 0px 0;
}

 .van-cell{
   margin-top: 20px;
 }

 .businessName{
   font-size: 0.40rem;
   padding-top:5px
 }

.businessBox{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.van-image{
  width: 100%;
  height: 100%;
}
.van-grid-item__content{
  background-color: red;
}

/deep/ .business-tabs {
  // .van-tabs__wrap {
  //   height: 82px;
  //   position: fixed;
  //   top: 92px;
  //   z-index: 1;
  //   left: 0;
  //   right: 0;
  // }
  .van-tab {
    min-width: 200px;
    border-right: 1px solid #edeff3;
    font-size: 30px;
    color: #777777;
  }
   .van-tab--active {
    color: #333333;
  }
   .van-tabs__nav {
    padding-bottom: 0;
  }
  .van-tabs__line {
    bottom: 8px;
    width: 31px !important;
    height: 6px;
    background-color: #f93e2e;
  }

}
</style>
